<template>
    <div>
        <h1>作者管理</h1>
        <el-divider></el-divider>
        <div class="good-header">
            <el-button type="primary" @click="showDialog(0)" plain>添加作者</el-button>
        </div>
        <el-divider></el-divider>

        <el-table :data="autherList" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="#ID"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="showDialog(1,scope.row)" icon="el-icon-edit" size="small"
                               circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="removeAuther(scope.row.id)" circle
                               size="small"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="isAdd?'添加作者':'修改作者'" :visible.sync="dialogVisible" width="30%" @close="handleClose">
            <el-input v-model="auther.name" placeholder="请输入作者姓名"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
              </span>
        </el-dialog>
        <el-pagination style="margin-top: 20px;"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[10, 15, 20, 30,100]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import {addAuther, delAuther, getAutherList, updateAuther} from "@/api/AutherApi";

    export default {
        data() {
            return {
                isAdd: true,
                dialogVisible: false,
                auther: {},
                pageNum: 1,
                pageSize: 10,
                total: 0,
                autherList: []
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.getAuthers()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.getAuthers()
            },
            showDialog(val, auther) {
                if (val == 0) {
                    this.isAdd = true
                } else {
                    this.isAdd = false
                    this.auther = auther
                }
                this.dialogVisible = true
            },
            getAuthers() {
                getAutherList(this.pageNum, this.pageSize).then(res => {
                    this.autherList = res.rows
                    this.total = res.total
                }).catch(err => {
                })
            },
            removeAuther(id) {
                this.$confirm('此操作将永久删除该作者, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delAuther(id).then(res => {
                        this.$message.success("删除成功")
                        this.getAuthers()
                    }).catch(err => {
                        this.$message.error("删除失败")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClose() {
                this.auther = {}
            },
            handleSubmit() {
                if (this.isAdd) {
                    addAuther(this.auther).then(res => {
                        this.$message.success("添加成功")
                        this.getAuthers()
                        this.dialogVisible = false
                    }).catch(err => {
                        this.$message.error("添加失败")
                    })
                } else {
                    updateAuther(this.auther).then(res => {
                        this.$message.success("修改成功")
                        this.getAuthers()
                        this.dialogVisible = false
                    }).catch(err => {
                        this.$message.error("修改失败")
                    })
                }
            }
        },
        created() {
            this.getAuthers()
        }
    }
</script>

<style scoped>

</style>